<div *ngIf="nodata" class="nodata">暂无数据，请重新选择处置流程</div>
<div *ngIf="!nodata" class="process">
    <div class="lctbar">
        <div *ngIf="!isCollapsed">
            <span class="status jxz"></span> 进行中&nbsp;&nbsp;&nbsp;
            <span class="status wwc"></span> 未完成&nbsp;&nbsp;&nbsp;
            <span class="status ywc"></span> 已完成
        </div>
    </div>
    <div class="lctList">
        <nz-layout>
            <nz-sider nzCollapsible [nzWidth]="300" [nzTrigger]="triggerTemplate">
                <div *ngFor="let data of czlcList;index as i">
                    <div *ngIf="i!=0" class="arrow"><i nz-icon nzType="down" nzTheme="outline"></i></div>
                    <div>
                        <button nz-button (click)="navClick(i)" class="but"
                            [ngClass]="{'wwc': data.type == 0, 'jxz': data.type == 1, 'ywc': data.type == 2}"
                            [title]="data.text">{{data.text}}</button>
                        <ul class="nav" *ngIf="data.childshow">
                            <li *ngFor="let item of data.children;index as j" [title]="item.text">
                                <button nz-button (click)="lctClick(i,data.id,item.id,item.classid,j)" class="navbut"
                                    [ngClass]="{'wwc': item.type == 0, 'jxz': item.type == 1, 'ywc': item.type == 2}">{{item.text}}</button>
                            </li>
                        </ul>
                    </div>
                </div>
            </nz-sider>
        </nz-layout>
    </div>
    <div class="center">
        <button nz-button nzType="primary" (click)="reportForm()">生成速报表</button>
    </div>
</div>

<nz-modal [nzClassName]="popClass" [(nzVisible)]="czlcVisible" nzMaskClosable="false" [(nzStyle)]="screenBottom"
    [nzBodyStyle]="{'padding':'5px 24px'}" nzWidth="1200" (nzOnCancel)="czlcCancel()" (nzOnOk)="czlcOk()"
    [nzMaskStyle]="maskStyle" [nzTitle]="modalTitle">
    <ng-template #modalTitle>
        <div cdkDrag cdkDragRootElement=".ant-modal" cdkDragHandle style="cursor: move;" title="按住拖动">
            {{czlcTitle}}
        </div>
    </ng-template>
    <div class="modalFlow">
        <nz-table [nzData]="[{}]" [nzFrontPagination]="false" [nzShowPagination]="false" nzSize="small">
            <thead>
                <tr>
                    <th nzAlign="center" *ngFor="let data of czlcData.head" [nzWidth]="data.width">{{data.name}}</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <ng-container *ngFor="let data of czlcData.main">
                        <td *ngIf="data.type === 'text'">
                            <div [innerHTML]="data.content"></div>
                        </td>
                        <td *ngIf="data.type === 'time'">
                            <nz-switch (ngModelChange)="timeSwitch($event,data.name)" [(ngModel)]="data.status">
                            </nz-switch>
                            <span class="timeWrap">{{data.content}}</span>
                        </td>
                        <td *ngIf="data.type === 'textarea'">
                            <div title="可修改" contenteditable="true" class="textareaBorder" [innerHTML]="data.content">
                            </div>
                        </td>
                    </ng-container>
                </tr>
            </tbody>
        </nz-table>
    </div>
</nz-modal>

<nz-modal [(nzVisible)]="reportFormVisible" [nzBodyStyle]="{'padding':'5px 24px'}" [nzWidth]="reportFormWidth"
    nzTitle="速报表" (nzOnCancel)="reportFormCancel()" (nzOnOk)="reportFormOk()">
    <nz-table [nzData]="[{}]" nzTableLayout="fixed" [nzWidthConfig]="['3%','8%','10%','','5%','5%','15%','25%']"
        [nzFrontPagination]="false" [nzShowPagination]="false" nzSize="small">
        <thead>
            <tr>
                <th rowspan="2" nzAlign="center">序号</th>
                <th rowspan="2" nzAlign="center">卡控项点</th>
                <th rowspan="2" nzAlign="center">卡控内容</th>
                <th rowspan="2" nzAlign="center">卡控要求</th>
                <th colspan="3" nzAlign="center">落实情况记录</th>
                <th rowspan="2" nzAlign="center">备注</th>
            </tr>
            <tr>
                <th nzAlign="center">响应时间</th>
                <th nzAlign="center">落实时间</th>
                <th nzAlign="center">落实情况</th>
            </tr>
        </thead>
        <tbody>
            <tr *ngFor="let data of reportFormList;index as i">
                <td nzAlign="center">{{+i+1}}</td>
                <td>
                    <div [innerHTML]="data.kkxd"></div>
                </td>
                <td>
                    <div [innerHTML]="data.kknr"></div>
                </td>
                <td>
                    <div [innerHTML]="data.kkyq"></div>
                </td>
                <td nzAlign="center">{{data.xysj}}</td>
                <td nzAlign="center">{{data.lssj}}</td>
                <td>
                    <textarea nz-input placeholder="请输入落实情况" [nzAutosize]="{ minRows: 2, maxRows: 2 }"
                        [(ngModel)]="data.lsqk"></textarea>
                    <!-- <input class="wd" nz-input placeholder="请输入落实情况" [(ngModel)]="data.lsqk" /> -->
                </td>
                <td>
                    <div [innerHTML]="data.bz"></div>
                </td>
            </tr>
        </tbody>
    </nz-table>
</nz-modal>